<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>管理员信息</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/templatemo_main.css" rel="stylesheet">
    <link href="../css/element/index.css" rel="stylesheet">



    <style>
        .navbar-inverse{
            background-color: #428bca;
            border: none;
        }
        .logo h1{
            color: white;
        }

        .templatemo-submenu li a{
            margin-left: 35px;
        }

        [v-cloak]{
            display: none;
        }

    </style>
</head>
<body style="background-color: #E2E2E2;">
<div id="wrapper"  v-cloak>
    <div class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <div class="logo"><h1>电动甄选</h1></div>
            <a href="/front/index.html">
                <i class="fa fa-desktop" style="color: white; font-size: 18px;margin-left:40px; ">

                </i>
            </a>
        </div>
        <div class="dropdown" style="display: inline-block;height: 100%;line-height: 50px;float: right;margin-right: 50px;font-size: 16px;">
            <div class="dropdown-toggle" data-toggle="dropdown"style="cursor: pointer;color: white;">
                <i class="fa fa-user" style="margin-right: 5px;font-size: 18px;"></i>{{user.name}}
                <span class="caret"></span>
            </div>
            <ul class="dropdown-menu" style="min-width: 120px;margin-left: -20px;">
                <li><a href="javascript:void(0)"@click="personalPage"><i class="fa fa-user fa-fw"></i>个人信息</a></li>
                <li><a href="javascript:void(0)"@click="logout"> <i class="fa fa-sign-out fa-fw"></i>退出</a></li>
            </ul>
        </div>
    </div>
    <div class="template-page-wrapper">
        <div class="navbar-collapse collapse templatemo-sidebar">
            <ul class="templatemo-sidebar-menu" id="menu-id">
                <li><a href="index.html"><i class="fa fa-home"></i>首页 </a> </li>
                <li class="sub open">
                    <a href="javascript:;">
                        <i class="fa fa-navicon"></i>信息管理
                        <div class="pull-right"><span class="caret"></span></div>
                    </a>
                    <ul class="templatemo-submenu">
                        <li v-if="authority.indexOf(1) != -1" class="active">
                            <a href="adminInfo.html">管理员信息</a>
                        </li>
                        <li v-if="authority.indexOf(2) != -1">
                            <a href="workerInfo.html">工作人员信息</a>
                        </li>
                        <li v-if="authority.indexOf(3) != -1">
                            <a href="userInfo.html">用户信息</a>
                        </li>
                        <li v-if="authority.indexOf(4) != -1">
                            <a href="videoInfo.html">新能源汽车介绍</a>
                        </li>
                        <li v-if="authority.indexOf(5) != -1">
                            <a href="richtextInfo.html">新能源汽车详细信息</a>
                        </li>
                        <li v-if="authority.indexOf(6) != -1">
                            <a href="messageInfo.html">汽车论坛</a>
                        </li>
                        <li v-if="authority.indexOf(1000001) != -1">
                            <a href="noticeInfo.html">公告信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000009) != -1">
                            <a href="typeInfo.html">商品类型信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000010) != -1">
                            <a href="goodsInfo.html">商品详情信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000011) != -1">
                            <a href="orderInfo.html">订单信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000012) != -1">
                            <a href="commentInfo.html">评价信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000013) != -1">
                            <a href="richtextInfoComment.html">汽车评论</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" @click="personalPage">个人信息</a>
                        </li>

                    </ul>
                </li>
                <li>
                    <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码 </a>

                </li>
                <li>
                    <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录 </a>

                </li>
            </ul>
        </div>
        <div class="templatemo-content-wrapper">
            <div class="templatemo-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                管理员信息表
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <div class="nx-table-header">
                                        <botton class="btn btn-sm btn-primary" @click="add()">新增</botton>
                                        <botton class="btn btn-sm btn-primary">批量导入</botton>

                                        <input type="file" multiple ref="file" style="position: absolute; top: 0;left: 50px;width: 70px;height: 30px;opacity: 0;"
                                             @click="clickUpload" @change="upload">


                                        <botton class="btn btn-sm btn-primary" @click="getExcelModel()">下载模版</botton>
                                        <input type="text" placeholder="请输入搜索内容" v-model="name" @keyup.enter="loadTable(1)">
                                        <i class="glyphicon glyphicon-search" @click="loadTable(1)"></i>
                                    </div>
                                   <table class="table table-striped table-bordered table-hover">
                                       <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>姓名</th>
                                            <th>昵称</th>
                                            <th>性别</th>
                                            <th>年龄</th>
                                            <th>生日</th>
                                            <th>手机号</th>
                                            <th>地址</th>
                                            <th>邮箱</th>
                                            <th>身份证</th>
                                            <th>操作</th>
                                        </tr>
                                       </thead>
                                       <tbody v-for="obj in objs">
                                            <tr>
                                                <td>{{obj.id}}</td>
                                                <td>{{obj.name}}</td>
                                                <td>{{obj.nickName}}</td>
                                                <td>{{obj.sex}}</td>
                                                <td>{{obj.age}}</td>
                                                <td>{{obj.birthday}}</td>
                                                <td>{{obj.phone}}</td>
                                                <td>{{obj.address}}</td>
                                                <td>{{obj.email}}</td>
                                                <td>{{obj.cardId}}</td>
                                                <td>
                                                    <button class="btn btn-primary btn-xs" @click="init(obj)">编辑</button>
                                                    <button class="btn btn-danger btn-xs" @click="del(obj.id)">删除</button>
                                                </td>
                                            </tr>
                                       </tbody>
                                   </table>
                                    <ul class="pagination">
                                        <li class="page-item" v-bind:class="{disabled:preActive}">
                                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                                        </li>
                                        <li class="page-item" v-if="pageInfo.pageNum > 1">
                                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                                        </li>
                                        <li class="page-item disabled">
                                            <a class="page-link" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                                        </li>
                                        <li class="page-item" v-if="pageInfo.hasNextPage">
                                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                                        </li>
                                        <li class="page-item" v-bind:class="{disabled:nextActive}">
                                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.hasNextPage?(pageInfo.pageNum + 1):pageInfo.pageNum)">下一页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框-->
    <div class="modal" tabindex="-1" role="dialog" id="mod">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">请填写信息</span>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <input type="hidden" id="id" name="id" v-model="entity.id">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">姓名</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.name" placeholder="请输入姓名" id="name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">昵称</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.nickName" placeholder="请输入昵称" id="nickName">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">性别</label>
                            <div class="col-sm-7">
                                <label class="radio-inline">
                                    <input type="radio" value="男" v-model="entity.sex" id="sex">男
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" value="女" v-model="entity.sex" id="sex">女
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">年龄</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.age" placeholder="请输入年龄" id="age">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">生日</label>
                            <div class="col-sm-7">
                               <div class="block">
                                   <el-date-picker v-model="entity.birthday" id="birthday" type="datetime" clearable value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
                               </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.phone" placeholder="请输入手机号" id="phone">
                            </div>
                        </div>
                        <div class="form-group">
                        <label class="col-sm-3 control-label">地址</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" v-model="entity.address" placeholder="请输入地址" id="address">
                        </div>
                    </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">邮箱</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.email" placeholder="请输入邮箱" id="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">身份证</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="entity.cardId" placeholder="请输入身份证" id="cardId">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" @click="update()">保存</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="entity={sex: '男'}">关闭</button>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/templatemo_script.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/element/index.js"></script>
<script>
    function msg(type,msg) {
        Vue.prototype.$message({
            type: type,    //success(成功),warning(警告),error(错误)
            message: msg,
            duration: 1000,
            offset: 100,
            center: true
        })
    }

    new Vue({
        el:"#wrapper",
        data:{
            user: {},
            authority: [],
            objs: [],    //查询的列表
            pageInfo: {},  //页面相关
            preActive: true, //上一页是否存在，true是不存在，false是存在
            nextActive: true, //下一页是否存在，true是不存在，false是存在
            name: '',         //查询的姓名参数
            entity: {
                sex: '男'
            },
            permission: [],    //当前页面权限列表


        },
        created: function (){
            this.loadTable(1);
            this.user = JSON.parse(localStorage.getItem('user'));

            axios.get("/authority").then(res =>{
                if (res.data.code ==='0'){
                    this.authority =res.data.data;

                }else {
                    msg('error',res.data.msg);
                }
            });

            axios.get("/permission/1").then(res =>{
                if (res.data.code ==='0'){
                    this.permission =res.data.data;

                }else {
                    msg('error',res.data.msg);
                }
            });
        },
        methods: {
            //退出登录
            logout(){
                logout();
            },
            //新增
            add(){
                 if (this.permission.indexOf(1) === -1){
                     msg('warning','您没有操作权限');
                     return;
                 }
                 this.entity = {sex: '男'};
                $('#mod').modal('show');
            },
            //查询列表
            loadTable(pageNum){
                let name = this.name === '' ? 'all':this.name;
                axios.get("/adminInfo/page/"+name+"?pageNum="+pageNum).then(res =>{
                   if(res.data.code ==='0'){
                       this.objs = res.data.data.list;
                       this.pageInfo = res.data.data;
                       this.preActive = !(this.pageInfo.hasPreviousPage);
                       this.nextActive = !(this.pageInfo.hasNextPage);
                   }else {
                       msg('error',res.data.msg);
                   }
                });
            },
            //显示新增和编辑页面
            init(o){
                if (this.permission.indexOf(3) === -1){
                    msg('warning','您没有操作权限');
                    return;
                }
                this.entity =JSON.parse(JSON.stringify((o)));
                $('#mod').modal('show');

            },
            //删除
            del(id){
                if (this.permission.indexOf(2) === -1){
                    msg('warning','您没有操作权限');
                    return;
                }
                let _this = this;
                _this.$confirm('确认删除？','系统提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    cancelButtonClass:'btn-custom-cancel',
                    type:'warning'
                }).then(function (){
                    axios.delete("/adminInfo/"+id,this.entity).then(res =>{
                        if (res.data.code === '0'){
                            msg('success','删除成功');
                            $('#mod').modal('hide');
                            _this.loadTable(1);
                        } else {
                            msg('error',res.data.msg);
                        }
                    });
                }).catch(function (){
                    console.log('取消成功')
                })

            },
            //新增或修改后提交到后台
            update(){
                if (checkValid(this.entity)){
                    if (!this.entity.id){     //新增
                        axios.post("/adminInfo",this.entity).then(res =>{
                            if (res.data.code === '0'){
                                msg('success','添加成功');
                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error',res.data.msg);
                            }
                        });
                    }else {                 //修改
                        axios.put("/adminInfo",this.entity).then(res =>{
                            if (res.data.code === '0'){
                                msg('success','更新成功');
                                $('#mod').modal('hide');
                                this.loadTable(1);
                            } else {
                                msg('error',res.data.msg);
                            }
                        });
                    }
                }
            },

            //获取模板
            getExcelModel(){
                location.href = '/adminInfo/getExcelModel';
            },

            //判断是否有上传权限
            clickUpload: function (e){
                if (this.permission.indexOf(1) === -1){
                    msg('warning','您没有操作权限');
                    e.preventDefault();
                }

            },

            //上传
            upload:function (){
                let files = this.$refs.file.files;
                for (let i = 0; i < files.length; i++){
                    let formData = new FormData();
                    formData.append('file',files[i]);
                    axios.post('/adminInfo/upload',formData,{
                        'Content-Type':'multipart/form-data'
                    }).then(res =>{
                        if (res.data.code === '0'){
                            msg('success','批量导入成功');
                            this.loadTable(1)
                        }else {
                            msg('error', res.data.msg);
                        }
                    })
                }


            }


        }

    });
</script>
</body>
</html>